<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta name="author" content="HeZulong">
    <link rel="icon" href="https://hezulong.me/logo.png" type="image/png">
    <title>HeZulong - Résumé</title>
    <script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hezulong1/static/font/BookmanOldStyle/style.regular.css">
    {{!-- <script>
      ;(function() {
        var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        var setting = localStorage.getItem('vi-color-scheme') || 'auto';
        if (setting === 'dark' || (prefersDark && setting !== 'light')) { document.documentElement.classList.toggle('dark', true) }
      })()
    </script> --}}
    <style>{{{css}}}</style>
  </head>

  <body data-a4-width="210mm" data-a4-height="297mm" itemscope itemtype="http://schema.org/Person">
    <a class="icon no-print" id="toggle-theme">
      <span class="iconify" data-icon="{{toSocialIcon 'sun'}}"></span>
      <span class="iconify" data-icon="{{toSocialIcon 'moon'}}"></span>
    </a>
    <div class="container">
      <section class="row">
        {{#resume.basics}}
        <div class="card name-and-job">
          <h2 class="text-bolder name" itemprop="name">{{name}}</h2>
          <div class="text-muted job" itemprop="jobTitle">{{label}}</div>
          <div class="contact"><a href="mailto:{{email}}" itemprop="email" target="_blank">{{email}}</a></div>
        </div>
        {{/resume.basics}}
      </section>

      <section class="row page">
        <div class="card{{animeClass}}">
          <!-- #region 关于 -->
          <h4 id="about" class="no-print"><span class="title"><span>关于</span></span></h4>
          <div class="card-nested prose no-print" itemprop="description">
            {{{introMd}}}
            {{!-- <p class="description clear-margin-sm">{{breaklines resume.basics.summary}}</p> --}}
          </div>
          <!-- #endregion -->

          <!-- #region 个人优势 -->
          <h4 id="stacks"><span class="title"><span>个人优势</span></span></h4>
          <div class="card-nested" itemprop="stacks">
            <ul class="highlight">
              <li>熟练掌握 JavaScript、TypeScript、Vue、jQuery 编写高质量组件或函数</li>
              <li>熟练使用 Webpack、Vite、Rollup、Gulp 等脚手架，重度使用 Vite 进行辅助开发</li>
              <li>擅长搭建定制化框架，适配兼容浏览器，重构代码，优化 Web 性能，注重代码质量</li>
              <li>拥有大量政企项目(B端)经验和数据可视化经验，熟悉国内移动端技术，如 UniApp，原生微信小程序等</li>
              <li>丰富的团队沟通经验，趋向于敏捷开发和定期回归开发同时进行</li>
              <li>热爱研究新技术，CSSNext、Webcomponent、Electron、Canvas、SVG 等等，主要偏向于动画、色彩、交互</li>
            </ul>
          </div>
          <!-- #endregion -->

          <!-- #region 教育经历 -->
          <h4 id="education"><span class="title"><span>教育经历</span></span></h4>
          <ul>
            {{#each resume.education}}
            <li class="card-nested">
              <p class="clear-margin-sm">
                <strong>{{#if area}}{{area}}</strong>,{{/if}}
                <strong>{{studyType}}</strong>,
                {{institution}}
              </p>
              <p class="text-muted clear-margin-sm">
                <small>
                  {{startDate}} - {{#if endDate}} {{endDate}} {{else}} Currently Pursuing {{/if}}
                </small>
              </p>
              {{#if description}}<div>{{description}}</div>{{/if}}
              {{#if gpa}}<i>{{gpa}}</i>{{/if}}
              {{#courses}}
              <div class="space-top labels">
                <span class="label label-keyword">{{.}}</span>
              </div>
              {{/courses}}
            </li>
            {{/each}}
          </ul>
          <!-- #endregion -->

          {{#if resume.projects}}
          <!-- #region 项目经验 -->
          <h4 id="projects"><span class="title"><span>项目经验</span></span></h4>
          <ul>
            {{#each resume.projects}}
            <li class="card-nested">
              <p class="clear-margin-sm">
                {{#if type}}<span class="badge">{{type}}</span>{{/if}}
                <strong class="text-accent">{{displayName}}</strong>
                {{#if repositoryUrl}}
                <a href="{{repositoryUrl}}" class="icon" target="_blank">
                  <span class="iconify" data-icon="{{toSocialIcon 'github'}}"></span>
                </a>
                {{/if}}
                {{#if website}}
                <a href="{{website}}" class="icon" target="_blank">
                  <span class="iconify" data-icon="{{toSocialIcon 'link'}}"></span>
                </a>
                {{/if}}
                <small class="space-left-sm text-muted">{{startDate}} - {{#if endDate}} {{endDate}} {{else}} 至今 {{/if}}</small>
              </p>
              {{#if highlights}}
              <p class="description project">{{description}}</p>
              {{else}}
              <p class="description project" style="margin-bottom: 0">{{description}}</p>
              {{/if}}
              {{#if highlights}}
              <ul class="highlight">
                {{#each highlights}}
                <li>{{{.}}}</li>
                {{/each}}
              </ul>
              {{/if}}
            </li>
            {{/each}}
          </ul>
          <!-- #endregion -->
          {{/if}}

          {{#if resume.work}}
          <!-- #region 工作经历 -->
          <h4 id="work-experience" class="pagebreak"><span class="title"><span>工作经历</span></span></h4>
          <ul>
            {{#each resume.work}}
            <li class="card-nested">
              <p class="clear-margin-sm">
                <strong class="text-accent">
                  {{#if website}}
                  <a href="{{website}}" target="_blank">{{company}}</a>
                  {{else}}
                  {{company}}
                  {{/if}}
                </strong>
                <span class="space-left-sm text-muted">{{position}}</span>
              </p>
              <p class="text-muted">
                <small>
                  <span class="space-right">{{startDate}} - {{#if endDate}}{{endDate}}{{else}}至今{{/if}} | {{location}}</span>
                </small>
              </p>
              {{#if summary}}<p>{{ summary }}</p>{{/if}}
              {{#if highlights}}
              <ul class="highlight">
                {{#each highlights}}
                <li>{{{.}}}</li>
                {{/each}}
              </ul>
              {{/if}}
            </li>
            {{/each}}
          </ul>
          <!-- #endregion -->
          {{/if}}

          <!-- #region 技能 -->
          <h4 id="skills"><span class="title"><span>技能</span></span></h4>
          <div class="card-nested" itemprop="skills">
            <div class="skill-table">
              {{#each resume.skills}}
              <div class="name">{{name}}</div>
              <div>{{join keywords}}</div>
              {{/each}}
            </div>
          </div>
          <!-- #endregion -->

          {{#if resume.publications}}
          <!-- #region Talks -->
          <h4 id="publications"><span class="title"><span>Talks</span></span></h4>
          <ul>
            {{#each resume.publications}}
            <li class="card-nested" style="margin-bottom: 0.5em">
              <p class="clear-margin-sm">
                <strong>{{#if website}}<a href="{{website}}" target="_blank">{{name}}</a>{{else}}{{name}}{{/if}}</strong>,&nbsp;
                {{publisher}}
              </p>
              <p class="text-muted clear-margin-sm">
                <small> {{releaseDate}} {{dateNote}}</small>
                <small>{{#if slides}},&nbsp;<a href="{{slides}}" target="_blank">Slides</a>{{/if}}</small>
              </p>
              <p class="clear-margin">{{summary}}</p>
            </li>
            {{/each}}
          </ul>
          <!-- #endregion -->
          {{/if}}

          {{!-- {{#if resume.awards}}
          <!-- #region 获奖 -->
          <h4 id="awards"><span class="title"><span>获奖</span></span></h4>
          <ul>
            {{#each resume.awards}}
            <li class="card-nested">
              <p class="clear-margin-sm" itemprop="award">
                <strong>{{title}}</strong>{{#if awarder}},&nbsp;{{awarder}}{{/if}}
              </p>
              <p class="text-muted clear-margin-sm">
                <small> {{date}} </small>
              </p>
              {{#if summary}}<p> {{summary}} </p>{{/if}}
            </li>
            {{/each}}
          </ul>
          <!-- #endregion -->
          {{/if}} --}}

          {{#if resume.volunteer}}
          <!-- #region Volunteer Work -->
          <h4 id="volunteer-work"><span class="title"><span>Volunteer Work</span></span></h4>
          <ul>
            {{#each resume.volunteer}}
            <li class="card-nested">
              <p class="clear-margin-sm">
                <strong>{{position}}</strong>,&nbsp;
                {{organization}}
              </p>
              <p class="text-muted">
                <small>
                  {{startDate}} - {{#if endDate}} {{endDate}} {{else}} 至今 {{/if}}
                </small>
              </p>
              <p>{{summary}}</p>
              <ul class="highlight">
                {{#each highlights}}
                  <li>{{.}}</li>
                {{/each}}
              </ul>
            </li>
            {{/each}}
          </ul>
          <!-- #endregion -->
          {{/if}}

          {{#if resume.interests}}
          <!-- #region 兴趣爱好 -->
          <h4 id="interests"><span class="title"><span>兴趣爱好</span></span></h4>
          <ul>
            {{#each resume.interests}}
            <li class="card-nested">
              <p itemprop="interest">
                <strong>{{name}}</strong>
              </p>

              <div class="space-top labels">
                {{#keywords}}
                <span class="label label-keyword">{{.}}</span>
                {{/keywords}}
              </div>
            </li>
            {{/each}}
          </ul>
          <!-- #endregion -->
          {{/if}}

          {{#if resume.references}}
          <!-- #region References -->
          <h4 id="references"><span class="title"><span>References</span></span></h4>
          <ul>
            {{#each resume.references}}
            <li class="card-nested">
              <p>
                <strong>{{name}}</strong>
              </p>
              <blockquote class="quote">
                <p class="clear-margin">{{reference}}</p>
              </blockquote>
            </li>
            {{/each}}
          </ul>
          <!-- #endregion -->
          {{/if}}

          {{!-- {{#if resume.languages}}
          <!-- #region 语言 -->
          <h4 id="languages"><span class="title"><span>语言</span></span></h4>
          <p class="card-nested">
            {{#each resume.languages}}
            <span class="enumeration"><strong>{{language}}</strong> ({{fluency}})</span>
            {{/each}}
          </p>
          <!-- #endregion -->
          {{/if}} --}}

          <!-- #region 附言 -->
          <h4 id="post" class="no-print"><span class="title"><span>附言</span></span></h4>
          <div class="card-nested no-print">
            <p>
              我的<a href="https://gitee.com/hezulong1/resume" target="_blank">在线简历</a>是开源的，基于 <a href="https://github.com/antfu" target="_blank">Anthony Fu</a> 大佬的<a href="https://resume.antfu.me/" target="_blank">简历</a>微调而成，适配了中文排版，加入了暗黑模式和出场动画，如果你恰好也喜欢，欢迎 Star ✨。
            </p>
          </div>
          <!-- #endregion -->

          <div style="text-align:center">
            <div class="detail no-print" style="font-size:14px;margin-top:1.25rem;">
              <a href="https://hezulong1.gitee.io/resume/resume.pdf" class="info" itemprop="pdf" target="_blank">
                PDF Version
              </a>
            </div>
              <div class="detail print-only" style="font-size:14px;margin-top:1.25rem;" >
              <a href="https://hezulong1.gitee.io/resume" class="info" itemprop="online" target="_blank">
                Online Version
              </a>
            </div>
            <div style="opacity:0.7; font-size:12px;margin-top:10px;">Last updated at {{getBuildDate ''}}</div>
          </div>
        </div>
      </section>
    </div>

    <script>
      var _hmt = _hmt || [];
      ;(function() {
        var classList = document.documentElement.classList;
        var btnDomNode = document.querySelector('#toggle-theme');
        btnDomNode.addEventListener('click', function() {
          var isDark = classList.contains('dark');
          classList.toggle('dark', !isDark);
        }, false);
      })()
    </script>

    <script async defer src="https://hm.baidu.com/hm.js?0973924eea5d41a94a8ae4f8ac67720b"></script>
  </body>
</html>
